<template>
	<section>
		<!--工具条-->
		<el-row :gutter="20" class="toolbar">
			<el-col :span="12"  style="padding-bottom: 0px;">
			<el-form :inline="true">
				<el-form-item>
					<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="batchStar" :disabled="this.sels.length===0">批量启用</el-button>
				</el-form-item>
			
				<el-form-item>
					<el-button type="warning" @click="batchStop" :disabled="this.sels.length===0">批量禁用</el-button>
				</el-form-item>
			</el-form>
			</el-col>
			<el-col :span="12"  style="padding-bottom: 0px;text-align: right;">
				<el-form :inline="true" :model="filters">
					<el-form-item>
						<el-input v-model="filters.keyword" placeholder="城市名称"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" v-on:click="getcity">查询</el-button>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="dialogFormVisible = true">添加城市</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>



		<!--列表-->
		<el-table :data="city" v-loading="loading" stripe style="width: 100%;" @selection-change="selsChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="name" label="城市名称" sortable>
			</el-table-column>
			<el-table-column label="状态" width="100" sortable prop="status">
				<template slot-scope="scope">
					<el-button :type="miStatusColor(scope.row.status)" size="mini" @click="handleSta(scope.$index, scope.row)">{{ formatSta(scope.row) }}</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="create_time" label="创建时间" sortable>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row,city)" icon="el-icon-delete"
					 circle></el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 页码 -->
		<el-col :span="24" class="toolbar">			
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			 :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
			</el-pagination>
		</el-col>
		<el-dialog title="添加城市" :visible.sync="dialogFormVisible" width="550px">
			<el-form :model="addcity">
				<el-form-item label="省市区" :label-width="formLabelWidth" required>
					<el-cascader :options="options" v-model="addcity.selectedOptions" :separator="' '" filterable clearable
					 placeholder="可输入地名搜索" size="medium" style="width:300px;">
					</el-cascader>
				</el-form-item>
				<el-form-item label="状态" :label-width="formLabelWidth">
					<el-switch v-model="addcity.status" :active-value="1" :inactive-value="0">
					</el-switch>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="add">确 定</el-button>
			</div>
		</el-dialog>

	</section>
</template>
<script>
	import options from "../../common/js/country-level2-data.js"
	export default {
		data() {
			return {
				filters: {
					keyword: ''
				},
				// 默认显示第几页
				currentPage: 1,
				// 总条数，根据接口获取数据长度(注意：这里不能为空)
				totalCount: 1,
				// 个数选择器（可修改）
				pageSizes: [10, 20, 30, 40],
				// 默认每页显示的条数（可修改）
				PageSize: 10,
				sels: [], //列表选中列
				loading: false,
				options: options, //存放城市数据
				dialogFormVisible: false, //显示添加城市
				addcity: {
					selectedOptions: [], //存放默认值
					status: 0
				},
				formLabelWidth: '120px', //表单左标题统一宽度
				miStatusColor: function(val) {
					if (val == 1) {
						return 'primary'
					} else {
						return 'warning'
					}
				},
				city: []
			}
		},
		methods: {
			//状态显示转换
			formatSta: function(row, column) {
				return row.status == 1 ? '启用' : row.status == 0 ? '禁用' : '未知';
			},
			// 列表-启用/禁用
			handleSta(index, row) {
				var text = "",
					text1 = "";
				if (row.status == 1) {
					text = "确认禁用？";
					text1 = "禁用成功！"
				} else {
					text = "确认启用？";
					text1 = "启用成功！"
				}
				this.$confirm(text, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// console.log(index, row);
					status = row.status == 1 ? 0 : 1;
					let params = {
						ids: row.id,
						status: status
					};
					this.$axios.post("/admin/city/batchedit", params)
						.then(res => {
							this.$message({
								type: 'success',
								message: text1
							});
							row.status = status
						})
						.catch(err => {
							this.$message({
								message: err.response.data.message,
								type: 'error'
							})
						})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			// 列表-删除当前行
			handleDelete(index, row, rows) {
				console.log(index, row);
				this.$confirm("确认删除？", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let params = {
						ids: row.id,
						delete:1
					};
					this.$axios.post("/admin/city/batchedit", params)
						.then(res => {
							this.$message({
								type: 'success',
								message: '成功!'
							});
							// rows.splice(index, 1);
							this.getcity();
						})
						.catch(err => {
							this.$message({
								message: err.response.data.message,
								type: 'error'
							})
						})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			// 添加城市-提交
			add() {
				var me = this;
				if (this.addcity.selectedOptions != "") {
					let cityname = "";
					if (this.addcity.selectedOptions[1] == "市辖区") {
						cityname = this.addcity.selectedOptions[0]
					} else {
						cityname = this.addcity.selectedOptions[1]
					}
					let params = {
						name: cityname,
						status: this.addcity.status
					};
					this.$axios.post("/admin/city/add", params)
						.then(res => {
							this.$message({
								type: 'success',
								message: '成功!'
							});
							this.getcity();
							this.dialogFormVisible = false;
						})
						.catch(function(err) {
							me.$message.error(err.response.data.message);
							// console.log(err.response)
						});
				} else {
					this.$message.error('请选择省市区！');
				}
			},
			//获取城市列表
			getcity() {
				let params = {
					p: this.currentPage,
					length: this.PageSize,
					keyword: this.filters.keyword
				};
				this.listLoading = true;
				//NProgress.start();				
				this.$axios.get("/admin/city/list/", {
						params
					})
					.then(res => {
						this.listLoading = false;
						this.city = res.data.data.citys;
						this.totalCount = res.data.data.total;
					})
					.catch(err => {
						this.$message({
							message: err.response.data.message,
							type: 'error'
						})
					})
			},
			// 分页
			// 每页显示的条数
			handleSizeChange(val) {
				// 改变每页显示的条数 
				this.PageSize = val
				// 点击每页显示的条数时，显示第一页
				this.getcity();
				// 注意：在改变每页显示的条数时，要将页码显示到第一页
				this.currentPage = 1
			},
			// 显示第几页
			handleCurrentChange(val) {
				// 改变默认的页数
				this.currentPage = val;
				// 切换页码时，要获取每页显示的条数
				this.getcity();
			},
			// 改变选中值
			selsChange: function(sels) {
				this.sels = sels;
			},
			// 批量删除
			batchRemove: function() {
				var me = this;
				var ids = this.sels.map(item => item.id);
				this.$confirm('确认删除选中城市吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let params = {
						ids: ids,
						delete: 1
					};
					console.log(params);
					this.$axios.post("/admin/city/batchedit", params)
						.then(res => {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.getcity();
							this.dialogFormVisible = false;
						})
						.catch(function(err) {
							me.$message.error(err.response.data.message);
							// console.log(err.response)
						});
				}).catch(() => {

				});
			},
			// 批量启用
			batchStar: function() {
				var me = this;
				var ids = this.sels.map(item => item.id);
				this.$confirm('确认启用选中城市吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = {
						ids: ids,
						status: 1
					};
					console.log(para);
					this.$axios.post("/admin/city/batchedit", para)
						.then(res => {
							this.$message({
								message: '启用成功',
								type: 'success'
							});
							this.getcity();
							this.dialogFormVisible = false;
						})
						.catch(function(err) {
							me.$message.error(err.response.data.message);
							// console.log(err.response)
						});
				}).catch(() => {

				});
			},
			// 批量禁用
			batchStop: function() {
				var me = this;
				var ids = this.sels.map(item => item.id);
				this.$confirm('确认禁用选中城市吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = {
						ids: ids,
						status: 0
					};
					console.log(para);
					this.$axios.post("/admin/city/batchedit", para)
						.then(res => {
							this.$message({
								message: '禁用成功',
								type: 'success'
							});
							this.getcity();
							this.dialogFormVisible = false;
						})
						.catch(function(err) {
							me.$message.error(err.response.data.message);
							// console.log(err.response)
						});
				}).catch(() => {

				});
			}
		},
		mounted() {
			this.getcity();
		}
	};
</script>

<style scoped lang="scss">
	@import '~scss_vars';

	.head_pic {
		width: 40px;
		height: 40px;
		padding: 1px;
		border: 1px solid #ccc;
		vertical-align: middle;
		margin: 3px 0;
	}

	.el-table .cell {
		padding: 3px;
	}
</style>
